<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    </style>
</head>

<body>
    <input type="file" name="file" id="file">
    <button> 点击生成html</button>
</body>
<script>
    var botton = document.querySelector('button')
    var html;
    var file = document.getElementById("file")
    file.onchange = e => {
        var img = load();
        img.onload = () => {
            var canvas = document.createElement("canvas");
            canvas.setAttribute('width', 800)
            canvas.setAttribute('height', 500)
            // document.body.appendChild(canvas);
            var ctx = canvas.getContext("2d");
            ctx.drawImage(img, 0, 0)
            console.log(file);
            var data = ctx.getImageData(0, 0, 800, 500)
            html = writehtml(data.data, 800, 500);
        }
    }
    botton.onclick = function () { down(html) }
    function load() {
        var imgurl = URL.createObjectURL(file.files[0]);
        var img = new Image();
        img.src = imgurl
        return img
    }
    function writehtml(arr, w, h) {
        let result = []
        let result1 = []
        console.log(arr);
        for (let i = 0; i < h; i++) {
            for (let j = 0; j < w; j++) {
                var c = w * i + j
                var R = arr[c * 0]
                var G = arr[c * 4 + 1]
                var B = arr[c * 4 + 2]
                var A = arr[c * 4 + 3] / 255
                var str = ` ${j + 1}px ${i}px rgba(${R},${G},${B},${A})`
                var str1 = ` ${j + 1}px ${i}px rgba(255-${R},255-${G},255-${B},1-${A})`
                result.push(str)
                result1.push(str1)
            }
        }

        var html = `<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .shadowbox{
            width: 801px;
            height: 500px;
        }
        .inner{
            width: 1px;
            height: 1px;
            box-shadow:${result.join(",")};
        }
        .shadowbox:hover{
            box-shadow:${result1.join(",")};
        }
    </style>
</head>
<body>
    <div class="shadowbox">
        <div class="inner">
        </div>
    </div>
</body>
</html>
        `;
        return html

    }

    function down(html) {
        console.log(1);
        var blob = new Blob([html], { type: 'text/html' });
        var url = URL.createObjectURL(blob)
        var a = document.createElement('a');
        a.href = url
        a.download = 'demo.html'
        a.style.display = 'none';
        a.click()
    }
</script>

</html>